<template>
  <el-dialog width="100vw" draggable v-model="show" style="z-index:100000;background:#202735;" fullscreen
    @open="setLoading" :show-close="false" destroy-on-close>
    <div class="demo-image" style="display: flex; flex-wrap: wrap; z-index: 1000000">
      <el-carousel height="100vh" style="width:100%;" :autoplay="false" ref="carousel" arrow="never" indicator-position="none"
        :initial-index="selectedImageIndex" :loop="false" @prev="prev" @next="next">
        <!-- 遍历时获取index，绑定独立的loading状态 -->
        <el-carousel-item v-for="(item, index) in pictureList" :key="item.url" style="text-align:center"
          v-loading="imageLoadStates[index]" element-loading-background="rgba(32, 39, 53, 0.8)"
          element-loading-text="Loading...">
          <img :src="item.url" loading="lazy" style="width:100%;height: 100%;opacity: 0; transition: opacity .5s ease-in-out"
            decoding="async" @load="onImageLoad(index, $event)" @error="onImageError(index, $event)"
            @click="onImageDoubleClick(index, $event)" />
        </el-carousel-item>
      </el-carousel>
    </div>
  </el-dialog>
</template>

<script>
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false
    },
    pictureList: {
      type: Array,
      default: () => []
    },
    selectedImageIndex: { // 新增：接收点击的图片索引
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      show: true,
      imageLoadStates: [], // 数组存储每个图片的加载状态
    };
  },
  watch: {
    dialogVisible(value) {
      this.show = value;
      if (value) {
        window.addEventListener('keydown', this.handleKeyDown);
      } else {
        window.removeEventListener('keydown', this.handleKeyDown);
      }
    }
  },
  mounted() {
    this.imageLoadStates = new Array(this.pictureList.length).fill(true);
    window.addEventListener('keydown', this.handleKeyDown);
  },
  created() {
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleKeyDown);
  },
  methods: {
    setLoading() {
      // 初始化加载状态数组，全部设为true
      this.imageLoadStates = new Array(this.pictureList.length).fill(true);
    },
    // 图片加载完成时，更新对应索引的状态
    onImageLoad(index, event) {
      this.imageLoadStates[index] = false
      this.$nextTick(() => {
        event.target.style.opacity = '1';
      });
    },
    // 图片加载错误处理
    onImageError(index, event) {
      this.imageLoadStates[index] = false
      event.target.classList.add('wutu');
    },
    onImageDoubleClick(){
      this.$emit('DoubleClick')
    },
    prev() {
      if (this.$refs.carousel) {
        this.$refs.carousel.prev();
      }
    },
    next() {
      if (this.$refs.carousel) {
        this.$refs.carousel.next();
      }
    },
    handleKeyDown(event) {
      if (event.key === 'ArrowRight') this.next();
      if (event.key === 'ArrowLeft') this.prev();
    }
  }
};
</script>

<style lang="scss" scoped>

.fullscreen-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* 保持宽高比，图片完整显示 */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.wutu {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
}

.wutu::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  display: block;
  width: 100%;
  height: 100%;
  background: url('../../assets/errImg.svg') no-repeat center center #fff;
  background-size: contain;
}

.el-carousel__item {
  background-color: #202735;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-placeholder,
.image-error {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f2f2f2;
  width: 100%;
  height: 100%;
  color: #999;
  font-size: 16px;
}
</style>
<style>
/* 移除 el-dialog 头部高度 */
.el-dialog__header {
  height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* 移除 el-dialog 内容的内边距 */
.el-dialog__body {
  padding: 0 !important;
}
</style>

